<script>
import { Modal } from 'ant-design-vue';

export default {
  name: 'Modal',

  props: {
    // 指定Modal挂载的HTML节点
    getContainer: {
      type: Function,
      default: () => document.body
    },
    // 是否显示Modal
    visible: {
      type: Boolean,
      default: false
    },
    // 是否显示右上角的关闭按钮
    closable: {
      type: Boolean,
      default: true
    },
    // 是否展示遮罩层
    mask: {
      type: Boolean,
      default: false
    },
    // 弹框的宽度
    width: {
      type: Number,
      default: 450
    },
    // 设置弹框的层级
    zIndex: {
      type: Number,
      default: 1000
    },
    // 是否显示确认按钮
    showOk: {
      type: String,
      default: ''
    },
    // 是否显示取消按钮
    showNo: {
      type: String,
      default: ''
    },
    // 确认按钮文本
    okText: {
      type: String,
      default: '确认'
    },
    // 确认按钮类型
    okType: {
      type: String,
      default: 'primary'
    },
    // 取消按钮文本
     cancelText: {
       type: String,
       default: '取消'
     },
    //  自定义content类名
    contentClass: {
      type: String,
      default: 'modal-content'
    }
  },

  data() {
    return {
      // modal的引用
      modal: null
    };
  },

  methods: {
    showInfo() {
      const h = this.$createElement;
      this.modal = Modal.confirm({
        width: this.width,
        zIndex: this.zIndex,
        // 垂直居中
        // centered: true,
        title: () => h('span', {}, [ this.$slots.title ]),
        content: () => h('div', {}, [ this.$slots.content ]),
        closable: this.closable,
        mask: this.mask,
        okText: this.okText,
        okType: this.okType,
        cancelText: this.cancelText,
        okButtonProps: {
          style: {
            display: this.showOk,
            color: '#fff',
            backgroundColor: '#ec4141'
          }
        },
        cancelButtonProps: {
          style: { display: this.showNo }
        },
        // 指定Modal挂载的HTML节点
        getContainer: () => this.getContainer(),
        icon: () => h('i', {}, [ this.$slots.icon || null ]),
        // Modal弹框完全关闭后的回调,用箭头函数代替,不然this指向的是Modal的实例
        onCancel: () => {
          this.$emit('onCancel');
        },
        onOk: () => {
          this.$emit('onOk');
        }
      });
    },
    // 手动关闭弹框事件
    closeModal() {
      this.modal.destroy();
    }
  },

  watch: {
    visible: {
      handler(value) {
        // visible为true时，需要显示Modal
        if(value) this.showInfo();
      },
      immediate: true
    }
  },

  render(h) {
    return h('div');
  }
};
</script>

<style lang="less" scoped>

</style>